<template>
  <div style="min-height:250px">
    <div v-show="step===1">
      <div class="head">
        旧手机号验证
      </div>
      <PhoneForm v-model="oldPhoneForm" key="stpe1" ref="oldPhoneForm" phoneDisable @handleEnter="next"/>
      <div style="margin-top: 40px;">
        <el-button class="submit-btn"
          :loading="loading"
          type="primary"
          @click="next">下一步</el-button>
      </div>
      <p class="tips-wrap">
        <span class="contact-btn">无法收到验证码？
          <span @click="openUrl">联系客服</span>
        </span>
      </p>
    </div>
    <div v-show="step===2">
      <div class="head">
        {{userInfo.PhoneNumber?'新手机号绑定':'绑定手机号'}}
      </div>
      <PhoneForm v-model="newPhoneForm" key="stpe2" ref="newPhoneForm" @handleEnter="submit"/>
      <div style="margin-bottom:31px;margin-top: 40px;">
        <el-button class="submit-btn"
          :loading="loading"
          type="primary"
          @click="submit">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import PhoneForm from '@/components/phone-form/index.vue'
import { checkSms } from '@/api/login'
import mixins from './bind-mixins'
import { mapGetters } from 'vuex'
import { openKefu } from '@/utils/judge'
export default {
  name: 'ChangeBindPhone',
  components: {
    PhoneForm
  },
  mixins: [mixins],
  props: {
    visible: Boolean
  },
  data () {
    return {
      step: 2,
      oldPhoneForm: {
        phoneNumber: '',
        code: '',
        codeID: ''
      },
      newPhoneForm: {
        auth_type: 'phone',
        phoneNumber: '',
        code: '',
        codeID: ''
      },
      loading: false
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'appInfo'])
  },
  watch: {
    visible: {
      handler (val) {
        if (val) {
          const phoneNumber = this.userInfo.PhoneNumber
          if (phoneNumber) {
            this.oldPhoneForm.phoneNumber = phoneNumber
          } else {
            this.step = 2
          }
        } else {
          this.resetFields()
        }
      },
      immediate: true
    }
  },
  methods: {
    openUrl () {
      // this.$xz('xz_open_url', kefuUrl[String(this.appInfo.appID)])
      openKefu()
    },
    /**
     * 下一步
     */
    next () {
      this.$refs.oldPhoneForm.validate().then(() => {
        const params = {
          code: this.oldPhoneForm.code,
          codeid: this.oldPhoneForm.codeID || this.userInfo.PhoneNumber
        }
        this.$refs.oldPhoneForm.codeError = ''
        this.loading = true
        checkSms(params, { offset: 169 }).then(res => {
          this.loading = false
          if (res.data?.inEffect) {
            this.step = 2
          } else {
            const msg = '请输入正确的验证码'
            this.$refs.oldPhoneForm.codeError = msg
            this.$PsMessage({ message: msg, offset: 169 })
          }
        }).catch(e => {
          this.loading = false
        })
      })
    },
    /**
     * 绑定
     */
    submit () {
      this.$refs.newPhoneForm.validate().then(() => {
        const params = {
          auth_type: this.newPhoneForm.auth_type, // phone-绑定手机,wx-绑定微信
          phone: this.newPhoneForm.phoneNumber, // 手机号码,auth_type=phone为必填
          auth_code: this.newPhoneForm.code, // 授权码或者手机验证码
          code_id: this.newPhoneForm.codeID// 手机验证码对应id,只有授权类型为phone需要
        }
        if (this.userInfo.PhoneNumber) {
          params.old_phone = this.userInfo.PhoneNumber // 旧手机号码，换绑手机号码用的
          // params.old_auth_code = this.oldPhoneForm.code // 旧手机验证码
          // params.old_code_id = this.oldPhoneForm.codeID || this.userInfo.PhoneNumber // 旧手机验证码对应id,只有换绑类型为phone需要
          params.bind_type = 1 // 0-绑定，1-换绑
        }
        this.$refs.newPhoneForm.codeError = ''
        this.onBindAuth(params, 'phone').then(() => {
          this.$xz('xz_substat_action', 1740)
        }).catch(err => {
          if (err && err.code === 12001) {
            this.$refs.newPhoneForm.codeError = '验证码错误'
          }
        })
      })
    },
    resetFields () {
      this.step = 2
      this.$refs.oldPhoneForm && this.$refs.oldPhoneForm.resetFields()
      this.$refs.newPhoneForm && this.$refs.newPhoneForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/theme/common/var";
.head {
  margin: 0px 0 20px;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}
.submit-btn {
  width: 100%;
}
.tips-wrap {
  margin-top: 12px;
  text-align: right;
}
.contact-btn {
  height: 16px;
  line-height: 16px;
  color: #999999;
  font-size: 12px;
  user-select: none;
  span {
    cursor: pointer;
    &:hover {
      color: $--color-primary;
    }
  }
}
</style>
